<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>花瓣美素</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 头部开始 -->
	<header>
		<div class="wrapper banxin">
			<div class="logo fl">
				<img class="h_logo" src="images/logo.png" alt="">
			</div>
			<ul class="copyr fl">
				<li><a href="#">首页</a></li>
				<li><a href="#">供图者</a></li>
				<li><a href="#">精选专辑</a></li>
				<li><a href="#">最新活动</a></li>
				<li><a class="h_red" href="#">11月特惠
						<i class="hot"></i>
				</a></li>
			</ul>
			<div class="login fr">
				<dl>
					<dt><a href="#">套餐价格</a></dt>
					<dd><a href="#">登录</a></dd>
					<dd><span>|</span></dd>
					<dd><a href="#">注册</a></dd>
				</dl>
			</div>
		</div>
	</header>
<!--头部结束 -->
<!--banner开始 -->
	<div class="banner">
		<div class="glide" id="g_box">
			<ul class="slides" id="g_ul">
				<li><img src="images/ban03.jpg"></li>
				<li><img src="images/ban02.jpg"></li>
				<li><img src="images/ban04.jpg"></li>
				<li><img src="images/ban01.jpg"></li>
				<li><img src="images/ban05.jpg"></li>
			</ul>
			<ul class="slides_nav" id="g_cl">
				<li class="slides_n_li"></li>
				<li class="slides_n_li"></li>
				<li class="slides_n_li"></li>
				<li class="slides_n_li"></li>
				<li class="slides_n_li"></li>
			</ul>
		</div>
		<div class="search">
			<div class="txt fl">
				<input class="text" type="text" placeholder="搜索照片、矢量图和插画，多个词语注意用空格分隔，支持双语哦">
			</div>
			<div class="select fl" id="select">全部图片
				<span class="arr-t"></span>
				<span class="arr-b"></span>
				<div class="select_in" id="sel_in">
					<ul id="sel_ul">
						<li>全部图片</li>
						<li>照片</li>
						<li>矢量图</li>
					</ul>
				</div>
			</div>
			<div class="btn fl">
				<input class="button" type="button">
			</div>
			<div class="sr_img">
			</div>
		</div>
		<div class="project">
			<ul>
				<li><a href="#">商业/金融</a></li>
				<li><a href="#">城市</a></li>
				<li><a href="#">教育</a></li>
				<li><a href="#">插图</a></li>
				<li><a href="#">医疗和健康</a></li>
			</ul>			
			<ul>
				<li><a href="#">科学</a></li>
				<li><a href="#">运动</a></li>
				<li><a href="#">科技</a></li>
				<li><a href="#">大自然</a></li>
				<li><a href="#">旅游</a></li>
			</ul>

		</div>
	</div>
<!--banner结束 -->
<!--sorts开始 -->
	<div class="sorts">
		<div class="album banxin">
			<div class="s_head">
			<h4>精选专辑</h4>
			<span></span>
			</div>
			<div class="pic">
				<ul id="p_ul">
					<li>
						<a href="#">
							<img src="images/s_pic1.jpg" alt="">
							<h5>美容</h5>
						</a>
						<div class="pic_mask">
							<p>共99张</p>
							<span></span>
						</div>
					</li>
					<li>
						<a href="#">
							<img src="images/s_pic2.jpg" alt="">
							<h5>冬季</h5>
						</a>
						<div class="pic_mask">
							<p>共98张</p>
							<span></span>
						</div>						
					</li>
					<li>
						<a href="#">
							<img src="images/s_pic3.jpg" alt="">
							<h5>养生</h5>
						</a>
						<div class="pic_mask">
							<p>共93张</p>
							<span></span>
						</div>
					</li>
					<li>
						<a href="#">
							<img src="images/s_pic4.jpg" alt="">
							<h5>商务</h5>
						</a>
						<div class="pic_mask">
							<p>共92张</p>
							<span></span>
						</div>
					</li>
					<li>
						<a href="#">
							<img src="images/s_pic5.jpg" alt="">
							<h5>中国</h5>
						</a>
						<div class="pic_mask">
							<p>共99张</p>
							<span></span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="s_foot">
			<a href="#">查看更多</a>
		</div>
	</div>
<!--sorts结束 -->
<!--glide开始 -->
	<div class="glide">
		<div class="glide_in banxin" id="g_in">
			<div class="g_head">
				<h4>精选图片</h4>
				<span></span>				
			</div>
			<div class="g_body" id="g_body">
				<ul id="gb_ul">
					<li>
						<dl id="g_dl1">
							<dd class="one">
								<div class="g_mask">
									<i>复古风格衣服的女孩</i>
									<span></span>
									<u>美丽、时尚、年轻</u>
									<u>女孩、性感</u>
								</div>
							</dd>
							<dd class="two">
								<div class="g_mask">
									<i>蒲公英的种子与风</i>
									<span></span>
									<u>微妙、户外、植物</u>
									<u>绽放、风吹</u>
								</div>
							</dd>
							<dd class="three">
								<div class="g_mask">
									<i>蝴蝶从中的偏偏少女</i>
									<span></span>
									<u>优雅、女孩、美容</u>
									<u>时尚、动物</u>
								</div>
							</dd>
							<dd class="four">
								<div class="g_mask">
									<i>放飞的粉色气球</i>
									<span></span>
									<u>可爱的、活力、粉红色</u>
									<u>漂亮、吸引力</u>
								</div>
							</dd>
							<dd class="fire">
								<div class="g_mask">
									<i>流动的沙丘波澜壮观</i>
									<span></span>
									<u>沙漠、旅游、假日</u>
									<u>流动的、景观</u>
								</div>
							</dd>
							<dd class="six">
								<div class="g_mask">
									<i>极限运动空中跳伞者</i>
									<span></span>
									<u>体育、跳跃、冒险</u>
									<u>勇敢、高空降落</u>
								</div>
							</dd>
							<dd class="seven">
								<div class="g_mask">
									<i>雪山全景和滑雪板</i>
									<span></span>
									<u>白色、高峰、滑雪</u>
									<u>风光、自然景观</u>
								</div>
							</dd>
						</dl>
					</li>
					<li>
						<dl id="g_dl2">
							<dd class="one n1">
								<div class="g_mask">
									<i>风暴中的海豚</i>
									<span></span>
									<u>纹理、动物、环境</u>
									<u>裂缝、景观生态</u>
								</div>
							</dd>
							<dd class="two n2">
								<div class="g_mask">
									<i>自行车和一个小女孩</i>
									<span></span>
									<u>休闲、自由、阳光</u>
									<u>平静、儿童</u>
								</div>
							</dd>
							<dd class="three n3">
								<div class="g_mask">
									<i>黄昏下假日旅行</i>
									<span></span>
									<u>休闲、旅行、剪影</u>
									<u>出差、手提箱</u>
								</div>
							</dd>
							<dd class="four n4">
								<div class="g_mask">
									<i>黑与白交替的孤独</i>
									<span></span>
									<u>阴影、寂寞、孤独</u>
									<u>心情、艺术空</u>
								</div>
							</dd>
							<dd class="fire n5">
								<div class="g_mask">
									<i>人与狗在海滩上</i>
									<span></span>
									<u>幸福、温馨、假期</u>
									<u>海边、快乐</u>
								</div>
							</dd>
							<dd class="six n6">
								<div class="g_mask">
									<i>大手拉小手的爱</i>
									<span></span>
									<u>家庭、生活、童年</u>
									<u>时光、亲情、爱</u>
								</div>
							</dd>
							<dd class="seven n7">
								<div class="g_mask">
									<i>父女日落时在海滩上玩</i>
									<span></span>
									<u>乐趣、黄昏、喜悦</u>
									<u>生活方式、享受</u>
								</div>
							</dd>
						</dl>						
					</li>
					<li>
						<dl id="g_dl3">
							<dd class="one m1">
								<div class="g_mask">
									<i>可爱的牧羊犬</i>
									<span></span>
									<u>节日、矢量、宠物</u>
									<u>礼品、时尚</u>
								</div>
							</dd> 
							<dd class="two m2">
								<div class="g_mask">
									<i>夏天卡通风景</i>
									<span></span>
									<u>设计、元素、可爱</u>
									<u>卡通、创意</u>
								</div>
							</dd>
							<dd class="three m3">
								<div class="g_mask">
									<i>滑板车手绘矢量图</i>
									<span></span>
									<u>速度、交通工具、经典</u>
									<u>手绘、滑板车</u>
								</div>
							</dd>
							<dd class="four m4">
								<div class="g_mask">
									<i>海报水彩圣诞老人的帽子</i>
									<span></span>
									<u>节日、喜庆、装饰</u>
									<u>圣诞、庆祝</u>
								</div>
							</dd>
							<dd class="fire m5">
								<div class="g_mask">
									<i>气球和幻想风暴</i>
									<span></span>
									<u>旋流、概念、背景</u>
									<u>纹理、壁纸</u>
								</div>
							</dd>
							<dd class="six m6">
								<div class="g_mask">
									<i>驯鹿和圣诞礼品盒</i>
									<span></span>
									<u>卡通、动物、圣诞</u>
									<u>快乐、礼物</u>
								</div>
							</dd>
							<dd class="seven m7">
								<div class="g_mask">
									<i>复古风格的漂亮女孩</i>
									<span></span>
									<u>时尚、美丽、肖像</u>
									<u>年轻、美丽</u>
								</div>
							</dd>
						</dl>						
					</li>
				</ul>
			</div>
			<div class="g_foot">
				<ol id="gf_ol">
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
		</div>
	</div>
<!--glide结束 -->
<!--hotSearch开始 -->
	<div class="hotSearch">
		<div class="hot_S_in banxin">
			<h4>热门搜素</h4>
			<span></span>
			<ul id="hs_ul">
				<li><a href="#">科技</a></li>
				<li><a href="#">VI设计</a></li>
				<li><a href="#">大数据</a></li>
				<li><a href="#">数据图表</a></li>
				<li><a href="#">人工智能</a></li>
				<li><a href="#">大海</a></li>
				<li><a href="#">高山</a></li>
				<li><a href="#">自然</a></li>
				<li><a href="#">动物</a></li>
				<li><a href="#">建筑</a></li>
				<li><a href="#">金融</a></li>
				<li><a href="#">运动</a></li>
				<li><a href="#">风景</a></li>
				<li><a href="#">花海</a></li>
				<li><a href="#">旅游</a></li>
				<li><a href="#">折页</a></li>
				<li><a href="#">户外</a></li>
				<li><a href="#">插画</a></li>
				<li><a href="#">海报</a></li>
				<li><a href="#">婴儿</a></li>
				<li><a href="#">商务</a></li>
				<li><a href="#">电脑</a></li>
				<li><a href="#">医疗</a></li>
				<li><a href="#">黑白</a></li>
			</ul>
		</div>
	</div>
<!--hotSearch结束 -->

<!--aboutUs开始-->
	<div class="aboutUs">
		<div class="aboutUs_in banxin">
			<h4>关于我们</h4>
			<span></span>
			<p>花瓣美素是一个集聚世界各地艺术家照片、矢量图、插画作的正版媒体素材库。</p>
			<ul>
				<li>
					<div class="ab_img"><img src="images/ab01.png" alt=""></div>
					<h5>100%正版</h5>
					<h6>拒绝盗版，高额赔付，平台对作品版权永久担保，拒绝任何版权困扰</h6>
				</li>
				<li>
					<div class="ab_img"><img src="images/ab02.png" alt=""></div>
					<h5>价格低廉</h5>
					<h6>统一售价，最低5元一张，随时付款，真正的互联网式图片解决方案</h6>
				</li>
				<li>
					<div class="ab_img"><img src="images/ab03.png" alt=""></div>
					<h5>海量图片库</h5>
					<h6>6000余万张图片和矢量图，定能满足您创意所需。</h6>
				</li>
				<li>
					<div class="ab_img"><img src="images/ab04.png" alt=""></div>
					<h5>发票支持</h5>
					<h6>支持普通发票和增值税发票，流程简单，购买后可在线提交发票申请</h6>
				</li>
			</ul>
		</div>
	</div>
<!--aboutUs结束-->
<!--foot开始-->
	<div class="foot">
		<div class="foot_in banxin">
			<div class="f_txt">
				还没找到想要的正版图片？来探索花瓣美素世界吧！
			</div>
			<div class="f_search">
				<input class="f-st" type="text" placeholder="搜索照片、矢量图和插画，支持双语哦">
				<div class="f-sb"></div>
			</div>
		</div>
	</div>
<!--foot结束-->
<!--footer开始-->
<footer>
	<div class="footer_in banxin">
		<div class="f_logo fl">
			<img src="images/f_logo.png" alt="">
			<h4><a href="#">回到花瓣</a></h4>
		</div>
		<div class="f_dl fl">
			<dl class="f_dl1 fl">
				<dd><a href="">关于我们</a></dd>
				<dd><a href="">价格体系</a></dd>
				<dd><a href="">联系我们</a></dd>
			</dl>
			<dl class="f_dl2 fl">
				<dd><a href="">版权问题</a></dd>
				<dd><a href="">服务条款</a></dd>
				<dd><a href="">常见问题</a></dd>
			</dl>
		</div>
		<div class="erqqimg fl">
			<img src="images/er.jpg" alt="">
			<a href="#">在线客服</a>
			<h5>400-999-8242<br/>
			 Email: contact@meisupic.com</h5>
		</div>
		<div class="offer fl">
			<h4>成为供图者，每次下载均有分成</h4>
			<a id="offer_a" href="#">供图者入口</a>
		</div>
	</div>
	<div class="copyright">Copyright ©2017 北京美素创意科技有限公司版权所有 京ICP备17042338号</div>
</footer>
</body>
</html>
<script src="js/common.js"></script>
<script src="js/animate.js"></script>
<script src="js/wh-meisu.js"></script>
